<template>
        <mian-layout style="background: #fff">
            <el-descriptions labelClassName="mysdItemLable" title="DAO详情" :column="2" border>
                <el-descriptions-item label="DAO头像">
                  <div class="tx" :style="'background-image: url('+details.headImage+')'"> </div>
                </el-descriptions-item>
                <el-descriptions-item label="DAO名称">{{details.name}}</el-descriptions-item>

                <el-descriptions-item label="创建者ID">{{details.ownerId}}</el-descriptions-item>
                <el-descriptions-item label="钱包地址">{{details.walletAddress}}</el-descriptions-item>
                <el-descriptions-item label="燃烧CXT"></el-descriptions-item>

                <el-descriptions-item label="DAO会员数">{{details.currentPeopleNum}}</el-descriptions-item>
                <el-descriptions-item label="注册时间" :span="2">{{details.createTime}}</el-descriptions-item>
            </el-descriptions>

            <div class="el-descriptions__header" style="padding-top:20px;margin-bottom:10px">
              <div class="el-descriptions__title">DAO会员列表</div>
            </div>
            <my-table :loading="loading" :lists="tableData" @selectionChange="tableSelect" @pageChange="handleChange" :sequence="true" :page='page'>
                
                <el-table-column property="userId" label="会员ID" align='center'></el-table-column>
                <el-table-column property="userName" label="会员账户名" align='center'></el-table-column>
                <el-table-column property="walletAddress" label="会员钱包地址" align='center'></el-table-column>
                <el-table-column property="createTime" label="加入时间" align='center'></el-table-column>

            </my-table>
            
            <div style="text-align: center; padding: 30px 0 0 0;">
                <my-back type="info" :reGetDataFlag="true">返回</my-back>
            </div>
        </mian-layout>
</template>

<script>
import {
  get_dao_detail,
  get_dao_member_list
} from '@/api/collext'
import myUploadFile from '@/components/public/myUploadFile.vue'
import myBack from '@/components/public/myBack.vue'
import myTable from '@/components/public/myTable';
import {mergeObject} from '@/utils/index'
export default {
  name: '',
  components:{
    myUploadFile,
    myBack,
    myTable
  },
  data() {
    return { 
      id:'',
      page:{
          pageSize:10,
          pageIndex:1,
          total:0,
      },
      details:{},
      loading:false,
      tableData:[],
      multipleSelectionIds:[],
      activeName:'1'
    }
  },
  async created() {
    this.id = this.$route.query.id
    this.getDetail()
    this.getList()
  },
  methods: {
    async getDetail(){
      const res = await get_dao_detail(this.id)
      if(res.success){
        this.details = res.data
      }
    },
    getList(){ 
        this.loading = false
        get_dao_member_list({
            daoId:this.id,
            limit: this.page.pageSize,
            page: this.page.pageIndex
        }).then(res=>{
            this.loading = false
            this.tableData = res.data
            this.page.total = res.total
        })
    },
    tableSelect(item){
        this.multipleSelectionIds = []
        for(let i=0;i<item.length;i++){
            this.multipleSelectionIds.push(item[i]._id)
        }
    },
    handleChange(index) {
        this.page.pageIndex = index;
        this.getList();
    },
    handleClick(){

    }
  }
}
</script>

<style lang="scss" scoped>
  .uploadimgbox{
    display: flex;
    .upItem{
      p{
        color: #999;
      }
      &+.upItem{
        margin: 0 0 0 103px;
      }
    }
  }
  .tx{
    width: 80px;
    height: 80px;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    overflow: hidden;
  }
</style>


